<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>YUI Global Object</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>YUI Global Object</h1>

    
        <a href="#toc" class="jump">Jump to Table of Contents</a>
    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
<p>This example demonstrates using YUI 2 with YUI 3 and a Gallery module.</p>
</div>

<div class="example">
    <style id="styleoverrides">
#wrapper {
    margin: 2em;
    width: 550px;
}
#wrapper .status {
    border: 1px solid black;
    margin-top: .5em;
    padding: .5em;
}

#wrapper textarea {
    visibility: hidden;
}

.yui-skin-sam .yui-toolbar-container .yui-toolbar-save span.yui-toolbar-icon {
    background-image: url( ../assets/yui/save.png );
    background-position: 3px 2px;
    left: 4px;
    top: 2px;
}
.yui-skin-sam .yui-toolbar-container .yui-toolbar-save-selected span.yui-toolbar-icon {
    background-image: url( ../assets/yui/save.png );
    background-position: 3px 2px;
    left: 4px;
    top: 2px;
}

.yui-skin-sam .yui-toolbar-container .yui-toolbar-clear span.yui-toolbar-icon {
    background-image: url( ../assets/yui/clear.png );
    background-position: 3px 2px;
    left: 4px;
    top: 2px;
}
.yui-skin-sam .yui-toolbar-container .yui-toolbar-clear-selected span.yui-toolbar-icon {
    background-image: url( ../assets/yui/clear.png );
    background-position: 3px 2px;
    left: 4px;
    top: 2px;
}

.yui-skin-sam .yui-toolbar-container .yui-toolbar-reset span.yui-toolbar-icon {
    background-image: url( ../assets/yui/reset.png );
    background-position: 3px 2px;
    left: 4px;
    top: 2px;
}
.yui-skin-sam .yui-toolbar-container .yui-toolbar-reset-selected span.yui-toolbar-icon {
    background-image: url( ../assets/yui/reset.png );
    background-position: 3px 2px;
    left: 4px;
    top: 2px;
}

.yui-skin-sam #main .yui-toolbar-container .yui-toolbar-titlebar h2 {
    font-size: 100%;
    font-weight: bold;
}
.yui-skin-sam #main .yui-toolbar-container .yui-toolbar-titlebar h2 {
    color:#000000;
    font-size:100%;
    font-weight:bold;
    margin:0;
    padding:0.3em 1em;
    text-align:left;
}

.yui-skin-sam #main .yui-toolbar-container .yui-toolbar-group h3 {
    color:#808080;
    font-size:75%;
    margin:1em 0 0;
    padding-bottom:0;
    padding-left:0.25em;
    text-align:left;
    font-weight: bold;
}

</style>

<div class="yui-skin-sam">
    <div id="wrapper">
        <textarea id="editor">This <strong>is a test</strong>, this is only a test.

        </textarea>
        <div class="status"> </div>
    </div>
</div>

<script>
YUI().use('node', 'event-delegate', 'yui2-editor', 'gallery-storage-lite', function(Y, result) {

    var YAHOO = Y.YUI2, res = Y.one('#wrapper .status'),
    defaultText = Y.one('#editor').get('value'),
    write = function(str) {
        var d = new Date();
        str += ' :: ' + d.toTimeString();
        res.setContent(str);
    },
    save = function() {
        Y.StorageLite.on('storage-lite:ready', function () {
            var html = editor.saveHTML();
            Y.StorageLite.setItem('editorContent', html);
            write('Editor content saved..');
        });
    };

    var editor = new YAHOO.widget.Editor('editor', {
        dompath: true,
        width: '550px',
        height: '250px',
        toolbar: {
            titlebar: 'Saving Editor',
            buttons: [
                { group: 'saveclear', label: 'Save & Clear',
                    buttons: [
                        { type: 'push', label: 'Save', value: 'save' },
                        { type: 'push', label: 'Clear', value: 'clear' },
                        { type: 'push', label: 'Reset', value: 'reset' }
                    ]
                },
                { group: 'textstyle', label: 'Font Style',
                    buttons: [
                        { type: 'push', label: 'Bold', value: 'bold' },
                        { type: 'push', label: 'Italic', value: 'italic' },
                        { type: 'push', label: 'Underline', value: 'underline' },
                        { type: 'separator' },
                        { type: 'select', label: 'Arial', value: 'fontname', disabled: true,
                            menu: [
                                { text: 'Arial', checked: true },
                                { text: 'Arial Black' },
                                { text: 'Comic Sans MS' },
                                { text: 'Courier New' },
                                { text: 'Lucida Console' },
                                { text: 'Tahoma' },
                                { text: 'Times New Roman' },
                                { text: 'Trebuchet MS' },
                                { text: 'Verdana' }
                            ]
                        },
                        { type: 'spin', label: '13', value: 'fontsize', range: [ 9, 75 ], disabled: true },
                        { type: 'separator' },
                        { type: 'color', label: 'Font Color', value: 'forecolor', disabled: true },
                        { type: 'color', label: 'Background Color', value: 'backcolor', disabled: true }
                    ]
                }
            ]
        }
    });
    editor.on('toolbarLoaded', function() {
        editor.toolbar.on('clearClick', function() {
            editor.setEditorHTML('<br>');
            write('Editor content cleared..');
        });
        editor.toolbar.on('resetClick', function() {
            if (confirm('Are you sure you want to reset the Editor?')) {
                editor.setEditorHTML(defaultText);
                Y.StorageLite.setItem('editorContent', null);
                write('Editor content reset to default..');
            }
        });
        editor.toolbar.on('saveClick', save);
    });
    Y.later(5000, editor, function() {
        if (editor.editorDirty) {
            editor.editorDirty = null;
            save();
        }
    }, {}, true);

    Y.on('domready', function() {

        Y.StorageLite.on('storage-lite:ready', function () {
            var editorValue;
            try {
                editorValue = Y.StorageLite.getItem('editorContent');
            } catch(e) {}
            if (!editorValue) {
                Y.one('#editor').set('value', editorValue);
                write('Loaded editor content from Local Storage');
            } else {
                write('Loaded default editor content');
            }
            editor.render();
        });

    });

});


</script>

</div>

<h3 id="setting-it-up">Setting it up</h3>

<p>This example uses the following modules: <code>node, gallery-storage-lite, yui2-editor</code></p>

<pre class="code prettyprint">YUI().use(&#x27;node&#x27;, &#x27;gallery-storage-lite&#x27;, &#x27;yui2-editor&#x27;, function(Y) {

});</pre>


<h3 id="aliasing-yui-2">Aliasing YUI 2</h3>
<p>For ease of use or for easier porting of code, this example aliases the <code>Y.YUI2</code> property on the instance to a local variable called <code>YAHOO</code>. 
This will allow most YUI 2 code to run unmodified.</p>

<pre class="code prettyprint">YUI().use(&#x27;node&#x27;, &#x27;gallery-storage-lite&#x27;, &#x27;yui2-editor&#x27;, function(Y) {
    &#x2F;&#x2F;Aliasing Y.YUI2 to YAHOO
    var YAHOO = Y.YUI2;

});</pre>


<h3 id="full-source">Full Source</h3>
<p>The rest of the example is just to show you that you can mix and match YUI 2 and YUI 3 code.</p>

<pre class="code prettyprint">YUI().use(&#x27;node&#x27;, &#x27;event-delegate&#x27;, &#x27;yui2-editor&#x27;, &#x27;gallery-storage-lite&#x27;, function(Y, result) {

    var YAHOO = Y.YUI2, res = Y.one(&#x27;#wrapper .status&#x27;),
    defaultText = Y.one(&#x27;#editor&#x27;).get(&#x27;value&#x27;),
    write = function(str) {
        var d = new Date();
        str += &#x27; :: &#x27; + d.toTimeString();
        res.setContent(str);
    },
    save = function() {
        Y.StorageLite.on(&#x27;storage-lite:ready&#x27;, function () {
            var html = editor.saveHTML();
            Y.StorageLite.setItem(&#x27;editorContent&#x27;, html);
            write(&#x27;Editor content saved..&#x27;);
        });
    };

    var editor = new YAHOO.widget.Editor(&#x27;editor&#x27;, {
        dompath: true,
        width: &#x27;550px&#x27;,
        height: &#x27;250px&#x27;,
        toolbar: {
            titlebar: &#x27;Saving Editor&#x27;,
            buttons: [
                { group: &#x27;saveclear&#x27;, label: &#x27;Save &amp; Clear&#x27;,
                    buttons: [
                        { type: &#x27;push&#x27;, label: &#x27;Save&#x27;, value: &#x27;save&#x27; },
                        { type: &#x27;push&#x27;, label: &#x27;Clear&#x27;, value: &#x27;clear&#x27; },
                        { type: &#x27;push&#x27;, label: &#x27;Reset&#x27;, value: &#x27;reset&#x27; }
                    ]
                },
                { group: &#x27;textstyle&#x27;, label: &#x27;Font Style&#x27;,
                    buttons: [
                        { type: &#x27;push&#x27;, label: &#x27;Bold&#x27;, value: &#x27;bold&#x27; },
                        { type: &#x27;push&#x27;, label: &#x27;Italic&#x27;, value: &#x27;italic&#x27; },
                        { type: &#x27;push&#x27;, label: &#x27;Underline&#x27;, value: &#x27;underline&#x27; },
                        { type: &#x27;separator&#x27; },
                        { type: &#x27;select&#x27;, label: &#x27;Arial&#x27;, value: &#x27;fontname&#x27;, disabled: true,
                            menu: [
                                { text: &#x27;Arial&#x27;, checked: true },
                                { text: &#x27;Arial Black&#x27; },
                                { text: &#x27;Comic Sans MS&#x27; },
                                { text: &#x27;Courier New&#x27; },
                                { text: &#x27;Lucida Console&#x27; },
                                { text: &#x27;Tahoma&#x27; },
                                { text: &#x27;Times New Roman&#x27; },
                                { text: &#x27;Trebuchet MS&#x27; },
                                { text: &#x27;Verdana&#x27; }
                            ]
                        },
                        { type: &#x27;spin&#x27;, label: &#x27;13&#x27;, value: &#x27;fontsize&#x27;, range: [ 9, 75 ], disabled: true },
                        { type: &#x27;separator&#x27; },
                        { type: &#x27;color&#x27;, label: &#x27;Font Color&#x27;, value: &#x27;forecolor&#x27;, disabled: true },
                        { type: &#x27;color&#x27;, label: &#x27;Background Color&#x27;, value: &#x27;backcolor&#x27;, disabled: true }
                    ]
                }
            ]
        }
    });
    editor.on(&#x27;toolbarLoaded&#x27;, function() {
        editor.toolbar.on(&#x27;clearClick&#x27;, function() {
            editor.setEditorHTML(&#x27;&lt;br&gt;&#x27;);
            write(&#x27;Editor content cleared..&#x27;);
        });
        editor.toolbar.on(&#x27;resetClick&#x27;, function() {
            if (confirm(&#x27;Are you sure you want to reset the Editor?&#x27;)) {
                editor.setEditorHTML(defaultText);
                Y.StorageLite.setItem(&#x27;editorContent&#x27;, null);
                write(&#x27;Editor content reset to default..&#x27;);
            }
        });
        editor.toolbar.on(&#x27;saveClick&#x27;, save);
    });
    Y.later(5000, editor, function() {
        if (editor.editorDirty) {
            editor.editorDirty = null;
            save();
        }
    }, {}, true);

    Y.on(&#x27;domready&#x27;, function() {

        Y.StorageLite.on(&#x27;storage-lite:ready&#x27;, function () {
            var editorValue;
            try {
                editorValue = Y.StorageLite.getItem(&#x27;editorContent&#x27;);
            } catch(e) {}
            if (!editorValue) {
                Y.one(&#x27;#editor&#x27;).set(&#x27;value&#x27;, editorValue);
                write(&#x27;Loaded editor content from Local Storage&#x27;);
            } else {
                write(&#x27;Loaded default editor content&#x27;);
            }
            editor.render();
        });

    });

});</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            
                <div id="toc" class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Table of Contents</h2>
                    </div>

                    <div class="bd">
                        <ul class="toc">
<li>
<a href="#setting-it-up">Setting it up</a>
</li>
<li>
<a href="#aliasing-yui-2">Aliasing YUI 2</a>
</li>
<li>
<a href="#full-source">Full Source</a>
</li>
</ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Setting up a YUI Instance">
                                        <a href="yui-core.html">YUI Core</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Working with multiple YUI instances.">
                                        <a href="yui-multi.html">Multiple Instances</a>
                                    </li>
                                
                            
                                
                                    <li data-description="On-demand loading of YUI and non-YUI assets">
                                        <a href="yui-loader-ext.html">YUI Loader - Dynamically Adding YUI and External Modules</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Create Class Hierarchies with &#x60;extend&#x60;">
                                        <a href="yui-extend.html">Create Class Hierarchies with &#x60;extend&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Creating a composition-based class structure using &#x60;augment&#x60;">
                                        <a href="yui-augment.html">Compose Classes of Objects with &#x60;augment&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Add behaviors to objects or static classes with &#x60;mix&#x60;">
                                        <a href="yui-mix.html">Add Behaviors to Objects with &#x60;mix&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Combine data sets and create shallow copies of objects with &#x60;merge&#x60;">
                                        <a href="yui-merge.html">Combine Data Sets with &#x60;merge&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Check data types with the &#x60;Lang Utilities&#x60;">
                                        <a href="yui-isa.html">Check Data Types with &#x60;Lang&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Get information about the current user agent with &#x60;UA&#x60;">
                                        <a href="yui-ua.html">Browser Detection with &#x60;UA&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Working with YUI 2 in 3">
                                        <a href="yui-yui2.html">Working with YUI 2 in 3</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Natively use YUI Gallery Modules">
                                        <a href="yui-gallery.html">Natively use YUI Gallery Modules</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
